import React from 'react';
import { Box, Typography } from '@mui/material';
import ChecklistOutlinedIcon from '@mui/icons-material/ChecklistOutlined';

// eslint-disable-next-line no-unused-vars
export const FeaturesListSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  return (
    <Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <ChecklistOutlinedIcon sx={iconSx} />
        <Typography sx={largeHeaderSx}>
          Our Tech Options
        </Typography>
      </Box>
      
      <Typography sx={listItemSx}>
        Focus on 80/20 principle: essential functionality, no bloat. Developer-centric approach without unnecessary features or complexity.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' } }}>
        <Box>
          <Typography sx={smallHeaderSx}>
            API and Frontend Features
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr' }}>
            <Typography sx={listItemSx}>• user registration of account with subdomain, email and password</Typography>
            <Typography sx={listItemSx}>• user email activation with 6 characters code and account creation</Typography>
            <Typography sx={listItemSx}>• resend activation code if not received</Typography>
            <Typography sx={listItemSx}>• user password reset through code sent by email</Typography>
            <Typography sx={listItemSx}>• user login</Typography>
            <Typography sx={listItemSx}>• user logout</Typography>
            <Typography sx={listItemSx}>• user change password once logged in</Typography>
            <Typography sx={listItemSx}>• account trial period</Typography>
            <Typography sx={listItemSx}>• edit of account billing information</Typography>
            <Typography sx={listItemSx}>• subscription creation</Typography>
            <Typography sx={listItemSx}>• plan change</Typography>
            <Typography sx={listItemSx}>• add new credit card</Typography>
            <Typography sx={listItemSx}>• remove credit card</Typography>
            <Typography sx={listItemSx}>• subscription cancel</Typography>
            <Typography sx={listItemSx}>• subscription re enable</Typography>
            <Typography sx={listItemSx}>• 3D Secure ready payments</Typography>
            <Typography sx={listItemSx}>• subscription handling via Stripe customer portal</Typography>
            <Typography sx={listItemSx}>• account's users list (by admins only)</Typography>
            <Typography sx={listItemSx}>• account's user create (by admins only)</Typography>
            <Typography sx={listItemSx}>• account's user update (by admins only)</Typography>
            <Typography sx={listItemSx}>• account's user delete (by admins only)</Typography>
          </Box>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx}>
            API Features and Routes
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr' }}>
            <Typography sx={listItemSx}>• Complete authentication routes (/api/v1/auth/login, /signup, etc)</Typography>
            <Typography sx={listItemSx}>• User management endpoints (/api/v1/users/)</Typography>
            <Typography sx={listItemSx}>• Team management (/api/v1/teams/)</Typography>
            <Typography sx={listItemSx}>• Stripe integration (/api/v1/stripe/)</Typography>
            <Typography sx={listItemSx}>• OpenTelemetry tracing with Jaeger</Typography>
            <Typography sx={listItemSx}>• Span collection for performance monitoring</Typography>
            <Typography sx={listItemSx}>• account's users list (by account admins only)</Typography>
            <Typography sx={listItemSx}>• account's user create (by account admins only)</Typography>
            <Typography sx={listItemSx}>• account's user update (by account admins only)</Typography>
            <Typography sx={listItemSx}>• stripe webhooks handling</Typography>
            <Typography sx={listItemSx}>• events notifications by email: new user subscribed - successful payments - failed payments</Typography>
            <Typography sx={listItemSx}>• daily notifications by email: expiring trials - failed payments - account suspension due to failed payments</Typography>
          </Box>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx}>
            NPM Packages Included
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
            <Typography sx={listItemSx}>• axios</Typography>
            <Typography sx={listItemSx}>• multer</Typography>
            <Typography sx={listItemSx}>• @mui/material</Typography>
            <Typography sx={listItemSx}>• @mui/x-data-grid</Typography>
            <Typography sx={listItemSx}>• @emotion/react</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/api</Typography>
            <Typography sx={listItemSx}>• react-router-dom</Typography>
            <Typography sx={listItemSx}>• @mui/icons-material</Typography>
            <Typography sx={listItemSx}>• @mui/x-tree-view</Typography>
            <Typography sx={listItemSx}>• @hookform/resolvers</Typography>
            <Typography sx={listItemSx}>• yup</Typography>
            <Typography sx={listItemSx}>• react-query</Typography>
            <Typography sx={listItemSx}>• react-hook-form</Typography>
            <Typography sx={listItemSx}>• @stripe/stripe-js</Typography>
            <Typography sx={listItemSx}>• moment</Typography>
            <Typography sx={listItemSx}>• react-i18next</Typography>
            <Typography sx={listItemSx}>• i18next@23.7.11</Typography>
            <Typography sx={listItemSx}>• papaparse</Typography>
            <Typography sx={listItemSx}>• lodash</Typography>
          </Box>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx}>
            OpenTelemetry Features
          </Typography>
          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr' }}>
            <Typography sx={listItemSx}>• Performance monitoring with spans collection</Typography>
            <Typography sx={listItemSx}>• Trace linking between page navigations</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/sdk-trace-web integration</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/exporter-trace-otlp-http for data export</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/resources for resource attribution</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/sdk-trace-base for core tracing</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/semantic-conventions for naming</Typography>
            <Typography sx={listItemSx}>• @opentelemetry/exporter-jaeger for visualization</Typography>
            <Typography sx={listItemSx}>• Dynamic trace naming for better visibility</Typography>
            <Typography sx={listItemSx}>• Page transition tracking with IDs</Typography>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};